<template>
  <div class="indexList">
    <card :header="{title:name}">
      <div slot="content">
        <!-- <cell :title="'项目'" :value="name"></cell> -->
        <cell-form-preview :list="list"></cell-form-preview>

        <Cell @click.native="buttonClick(item)" v-for='(item,index) in buttonList' :key='index' value-align='left' is-link>{{item.value}}</Cell>

        <div v-transfer-dom>
          <confirm v-model="show" title="重要提示" @on-confirm="refund">
            <p style="text-align:center;">
              {{$t('message.tuikuan1')}}，{{$t('message.tuikuan2')}}{{this.amount}}{{$t('message.tuikuan3')}}。 {{$t('message.tuikuan4')}}
            </p>
            <group class="border-left border-right">
              <x-input class="" placeholder="请输入证件号" v-model="idnum2"></x-input>
            </group>
          </confirm>
        </div>

      </div>
    </card>
  </div>

</template>


<script type="text/ecmascript-6">
const STARTSTR = "进行中"; //进行中提示
const ENDSTR = "已经结束"; //结束提示
const UNSTARTSTR = "尚未开始"; //尚未开始提示

import {
  isIdNumber,
  dateStringToDateTime,
  timeFormat,
  startTime,
  setTitle
} from "@/common/js/main.js";

import { cookie } from "vux";

import qs from "qs";
import { indexedDB } from "@/api/indexedDB.js";
import {
  CellFormPreview,
  Card,
  PopupRadio,
  Radio,
  Tabbar,
  TabbarItem,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  TransferDomDirective as TransferDom
} from "vux";

export default {
  props: ["page", "data1", "data2"],
  data() {
    return {
      amount: "",
      show: false,
      idnum2: "",
      name: "",
      list: [],
      stateMessage: "",
      bib: "",
      buttonList: [],
      myKey: "",
      key: "",
      idnum: ""
    };
  },
  computed: {},
  beforeCreate() {},
  created() {
    //console.log('-+_+_+_+_+_+_+_+')
    //console.log(data1)
    //console.log(data2)
    var _this = this;
    this.idnum = cookie.get("idnum");

    this.raceid = window.localStorage.getItem("raceId");

    this.key = _this.data1._key;
    this.state = this.data1.state;
    this.eventState = this.data1.state;

    this.eventId = this.data1.eventid;
    this.projectName = this.data1.event.name;

    /*

              eventid: this.eventId,
          idnum: this.idnum,
          projectName: this.projectName,
          state: this.state1,
          eventState: this.eventState

    */
    //console.log(_this.$router);

    //按钮逻辑
    if (
      _this.data1.pay_at === "" ||
      typeof _this.data1.pay_at === "undefined" ||
      (_this.data1.pay_at == null &&
        (typeof _this.data1.refundid == "undefined" ||
          _this.data1.refundid === 0))
    ) {
      //显示支付
      _this.state = 0;
      //                if (_this.payable == 1) {
      //                  //可以支付
      //                  //console.log(_this.eventData)
      //                  //console.log(_this.eventData.paystate)
      //
      //
      //
      //                  //paystate，有四种状态：unstart，未开放，finish已结束，close，关闭，opening，开放中。
      //                  //remain，剩余名额数，当paystate状态为opening的时候，展示该字段。
      //                  //如果该数>=0，显示还有**个名额
      //                  //如果<0，显示已额满，有abs(remain)个人在候补。
      //
      //                } else if (_this.payable == 0) {
      //                  //不支付
      //                }
      
      if (_this.data1.event.paystate == "unstart") {
        _this.buttonList.push({ label: "支付", value: "去支付(未开放)" });
      } else if (_this.data1.event.paystate == "finish") {
        _this.buttonList.push({ label: "支付", value: "去支付(已结束)" });
        //_this.buttonList.push("去支付(已结束)");
      } else if (_this.data1.event.paystate == "close") {
        _this.buttonList.push({ label: "支付", value: "去支付(已关闭)" });
        //_this.buttonList.push("去支付(已关闭)");
      } else if (_this.data1.event.paystate == "opening") {
        if (_this.data1.remain >> 0 >= 0) {
          _this.buttonList.push({
            label: "支付",
            // value: `去支付(开放中),有${Math.abs(
            //   _this.data1.event.remain
            // )}个名额`,
            value: `去支付(开放中)`
          });
        } else if (_this.data1.remain >> 0 < 0) {
          _this.buttonList.push({
            label: "支付",
            // value: `去支付(开放中),已额满有${Math.abs(
            //   _this.data1.event.remain
            // )}个人在候补`
            value: `去支付(已额满)`
          });
        } else {
          _this.buttonList.push({
            label: "支付",
            value: _this.$t("message.gopay")
          });
        }
      }

      if (!_this.data1.pay_at) {
        //未支付
        _this.buttonList.push({ label: "删除", value: "删除该报名" });
        //_this.list1.push("删除该报名");
      }

      //_this.value = [_this.$t("message.gopay")];
      //隐藏查看详情

      //历史成绩
    } else if (
      ((_this.data1.pay_at || _this.data1.pay_at !== "") &&
        typeof _this.data1.refundid == "undefined") ||
      _this.data1.refundid == 0
    ) {
      //显示退款
      _this.state = 1;
      //console.log('-_+_+_+_+_+')
      //console.log(_this.data1.event.refundable)
      if (_this.data1.event.refundable != 1) {
        //_this.list1.push(_this.$t("message.seedetails"));
      } else {
        _this.buttonList.push({ label: "退款", value: "退款" });

        //_this.buttonList = [_this.$t("message.refund1")];
      }
    } else if (
      ((_this.data1.pay_at || _this.data1.pay_at !== "") &&
        typeof _this.data1.refundid !== "undefined") ||
      _this.data1.refundid !== 0
    ) {
      //显示退款详情
      // _this.state = 2;
      //_this.data1.push(_this.$t("message.detailsofrefunds"));

      //_this.buttonList.push({ label: "修改", value: "修改报名资料" });
      _this.buttonList.push({ label: "删除", value: "删除报名" });
      // _this.value = [_this.$t("message.detailsofrefunds")];
    }

    //console.log(_this.editable)
    _this.buttonList.push({ label: "详情", value: "查看详情" });
    _this.buttonList.push({ label: "修改", value: "修改报名资料" });
    // if (_this.data1.event.editable) {
    //   _this.buttonList.push({ label: "修改", value: "修改报名资料" });

    // }

    this.name = this.data1.event.name;

    if (this.data1.bib == "") {
      this.bib = "参赛号未分配";
    } else {
      this.bib = this.data1.bib;
    }

    this.list.push({
      label: "参赛号",
      value: `${this.bib}`
    });

    this.list.push({
      label: "姓名",
      value: `${this.data1.name}`
    });



          var payMessage = "";
              var message = "";

              //判断支付状态
              if (!!this.data1.pay_at && !this.data1.refundid) {
                //已支付
                payMessage = "/已支付";
              } else if (!!this.data1.pay_at && !!this.data1.refundid) {
                //有退款
                payMessage = "/有退款";
              } else if (!this.data1.pay_at) {
                //未支付
                payMessage = "/未支付";
              }

              //判断报名状态
              if (this.data1.state === "normal" && !!this.data1.pay_at) {
                message = "报名成功";
              } else if (this.data1.state === "normal") {
                message = "报名正常";
              } else if (this.data1.state === "waitfail") {
                message = `候补结束，未获得名额`;
              } else if (this.data1.state === "wait") {
                if (!!this.data1.pos) {
                  //候补 有post人数
                  message = `候补中,前边有${this.data1.pos}人`;
                } else {
                  //候补 没有post人数
                  message = `候补中`;
                }
              } else if (this.data1.state == "draw") {
                message = `等待抽签`;
              } else if (this.data1.state === "undraw") {
                message = `未中签`;
              } else if (this.data1.state === "audit") {
                message = `未中签`;
              } else if (this.data1.state === "auditfail") {
                message  = `审核未通过(${this.data1.refusemsg})`
                if(!!this.data1.refusemsg){
                message  = `审核未通过`        
                }
                
              }

              this.stateMessage=message  

      

  

    this.list.push({
      label: "状态",
      value: `${this.stateMessage}`
    });
  },
  methods: {
    goEdit() {
      //修改报名资料
      //console.log("eventId" + this.eventId);
      //console.log("idnum" + this.idnum);
      //console.log("projectName" + this.projectName);
      //console.log("state" + this.state1);
      //console.log("eventState" + this.eventState);
      this.$router.push({
        name: "modify",
        params: {
          eventid: this.eventId,
          idnum: this.idnum,
          projectName: this.projectName,
          state: this.state1,
          eventState: this.eventState
        }
      });
    },
    buttonClick(item) {
      var _this = this;
      switch (item.label) {
        case "支付":
          _this.pay();
          break;
        case "退款":
          //_this.show=true;
          _this._getRefund();
          //_this.refund();
          break;
        case "删除":
          _this.$router.push({
            name: "declare",
            params: { type: "del", key: _this.key, id: _this.idnum }
          });
          break;
        case "修改":
          _this.goEdit();
          break;
        case "详情":
          //window.location.href='www.baidu.com'
          _this.$router.push({
            name: "message",
            query: { race_id: _this.raceid }
          });
          break;
        default:
      }
      //console.log(item);
    },
    refund() {
      if (this.idnum2 == "") {
        this.$vux.toast.show({
          type: "warn",
          text: this.$t("message.idnumbercannotbeempty")
        });
        return;
      }

      if (this.idnum !== this.idnum2) {
        this.$vux.toast.show({
          type: "warn",
          text: this.$t("message.idnumberisinconsistent")
        });
        return;
      }

      this.axios
        .post(
          `${window.host}refund/create`,
          qs.stringify({
            id: this.key,
            idnum: this.idnum2
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.$vux.toast.show({
              type: "success",
              text: this.$t("message.refundsuccessfully")
            });
            history.go(0);
          } else {
            //console.log(response)
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    //退款规则
    _getRefund() {
      /* this.$vux.loading.show({
         text: '退款中'
         })*/
      /*   if (this.state == 0) {
         return
         }*/
      let _this = this;
      //console.log('---')
      //console.log(this.key)

      this.axios
        .post(
          `${window.host}refund/rule`,
          qs.stringify({
            //eventid: this.eventId,
            id: this.key
          })
        )
        .then(function(response) {
          if (response.data.code == "200") {
            _this.eventData = response.data.data;
            _this.amount = response.data.data.amount;
            _this.show = true;
            // _this.$router.push({
            //   name: "declare",
            //   params: {
            //     type: "refund",
            //     key: _this.key,
            //     id: _this.idnum,
            //     amount: _this.amount
            //   }
            // });
          } else {
            //_this.$router.push({name: 'declare', params: {type: 'refund', key: _this.key, id: _this.idnum,amount:_this.amount}})
            _this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
          /*_this.$vux.loading.hide()*/
        });
    },
    pay() {
      //去支付
      this.axios
        .post(
          `${window.host}registration/pay`,
          qs.stringify({
            //raceid: this.raceid,
            id: this.key
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            window.location.href = response.data.data.url;
          } else {
            //console.log(response)
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    }
  },
  directives: {
    TransferDom
  },
  components: {
    CellFormPreview,
    Card,
    PopupRadio,
    Radio,
    Tabbar,
    TabbarItem,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Confirm
  }
};
</script>


<style lang="less" rel="stylesheet/less">
</style>

